import React from 'react'
import {Modal,Form, Input, message} from 'antd'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { updateGoodsActionAsync,LoadGoodsActionAsync } from '../../../redux/action/goodsAction';
function UpdateGoods(props) {
  const [params,setParams] = React.useState({})
  const [GoodsOne,setGoodsOne] = React.useState({})
  const handleParams=()=>{
    props.GoodsList.map((val,i)=>{
      if(val.key===props.selectedRowKey[0])
      {
        GoodsUpdateForm.setFieldsValue(val)
        setGoodsOne(val)
        setParams({avatar:val.avatar,key:val.key})
      }
      return null
    })
  }
  const [GoodsUpdateForm]=Form.useForm()
  React.useEffect(() => {
    handleParams()
  },[props.selectedRowKey])
  return (
    <div>
      <Modal 
        title="编辑商品信息" 
        visible={props.visible} 
        onOk={async ()=>{
          let fieldsValue = await GoodsUpdateForm.validateFields()
          fieldsValue = {...fieldsValue,...params}
          props.updateGoodsActionAsync({...GoodsOne,...fieldsValue})
          props.LoadGoodsActionAsync()
          props.close()
          message.success('修改成功!')
        }} 
        onCancel={props.close}
        okText='确定'
        cancelText='取消'
        >
        <Form  
          layout="horizontal"
          form={GoodsUpdateForm}
          name="GoodsUpdateForm"
        >
        <Form.Item
          name="name"
          label="名称"
          rules={[
            {
              pattern:/^.{2,10}$/,
              message: '请输入大于两个字符!',
            },
            {
              required: true,
              message: '请输入字符!',
            },
          ]}
        >
          <Input  placeholder='名称' />
        </Form.Item>
        <Form.Item
          name="price"
          label="价格"
          rules={[
            {
              pattern:/\d/,
              message: '请输入数字！',
            },
            {
              required: true,
              message: '请输入价格',
            },
          ]}
        >
          <Input placeholder='价格' />
        </Form.Item>
        <Form.Item
          name="number"
          label="数量"
          rules={[
            {
              pattern:/\d/,
              message: '请输入数字！',
            },
            {
              required: true,
              message: '请输入数量',
            },
          ]}
        >
          <Input placeholder='数量' />
        </Form.Item>
        <Form.Item
          name="describe"
          label="描述"
          rules={[
            {
              min:2,
              message: '请输入大于等于2个字符！',
            },
            {
              required: true,
              message: '请输入描述',
            },
          ]}
        >
          <Input placeholder='描述' />
        </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    GoodsList:state.goodsList
	}),
	{updateGoodsActionAsync,LoadGoodsActionAsync}
)(UpdateGoods)

